<template>
    <div class="edit-popup">
        <popup
            ref="popupRef"
            :title="popupTitle"
            :async="true"
            width="550px"
            @confirm="handleSubmit"
            @close="handleClose"
        >
            <el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
                <el-form-item label="工单号" prop="工单号">
                    <el-input v-model="formData.工单号" clearable placeholder="请输入工单号" />
                </el-form-item>
                <el-form-item label="状态" prop="状态">
                    <el-input v-model="formData.状态" clearable placeholder="请输入状态" />
                </el-form-item>
                <el-form-item label="工单类型" prop="工单类型">
                    <el-input v-model="formData.工单类型" clearable placeholder="请输入工单类型" />
                </el-form-item>
                <el-form-item label="分配机构" prop="分配机构">
                    <el-input v-model="formData.分配机构" clearable placeholder="请输入分配机构" />
                </el-form-item>
                <el-form-item label="分配人员" prop="分配人员">
                    <el-input v-model="formData.分配人员" clearable placeholder="请输入分配人员" />
                </el-form-item>
                <el-form-item label="参与人员" prop="参与人员">
                    <el-input v-model="formData.参与人员" clearable placeholder="请输入参与人员" />
                </el-form-item>
                <el-form-item label="业务标识" prop="业务标识">
                    <el-input v-model="formData.业务标识" clearable placeholder="请输入业务标识" />
                </el-form-item>
                <el-form-item label="工单来源" prop="工单来源">
                    <el-input v-model="formData.工单来源" clearable placeholder="请输入工单来源" />
                </el-form-item>
                <el-form-item label="来源编号" prop="来源编号">
                    <el-input v-model="formData.来源编号" clearable placeholder="请输入来源编号" />
                </el-form-item>
                <el-form-item label="包裹编号" prop="包裹编号">
                    <el-input v-model="formData.包裹编号" clearable placeholder="请输入包裹编号" />
                </el-form-item>
                <el-form-item label="快递公司" prop="快递公司">
                    <el-input v-model="formData.快递公司" clearable placeholder="请输入快递公司" />
                </el-form-item>
                <el-form-item label="快递单号" prop="快递单号">
                    <el-input v-model="formData.快递单号" clearable placeholder="请输入快递单号" />
                </el-form-item>
                <el-form-item label="产品IMEI" prop="产品IMEI">
                    <el-input v-model="formData.产品IMEI" clearable placeholder="请输入产品IMEI" />
                </el-form-item>
                <el-form-item label="产品品牌" prop="产品品牌">
                    <el-input v-model="formData.产品品牌" clearable placeholder="请输入产品品牌" />
                </el-form-item>
                <el-form-item label="产品型号" prop="产品型号">
                    <el-input v-model="formData.产品型号" clearable placeholder="请输入产品型号" />
                </el-form-item>
                <el-form-item label="产品颜色" prop="产品颜色">
                    <el-input v-model="formData.产品颜色" clearable placeholder="请输入产品颜色" />
                </el-form-item>
                <el-form-item label="保单号" prop="保单号">
                    <el-input v-model="formData.保单号" clearable placeholder="请输入保单号" />
                </el-form-item>
                <el-form-item label="密码" prop="密码">
                    <el-input v-model="formData.密码" clearable placeholder="请输入密码" />
                </el-form-item>
                <el-form-item label="出厂日期" prop="出厂日期">
                    <el-input v-model="formData.出厂日期" clearable placeholder="请输入出厂日期" />
                </el-form-item>
                <el-form-item label="购买日期" prop="购买日期">
                    <el-input v-model="formData.购买日期" clearable placeholder="请输入购买日期" />
                </el-form-item>
                <el-form-item label="保修期限" prop="保修期限">
                    <el-input v-model="formData.保修期限" clearable placeholder="请输入保修期限" />
                </el-form-item>
                <el-form-item label="保修状态" prop="保修状态">
                    <el-input v-model="formData.保修状态" clearable placeholder="请输入保修状态" />
                </el-form-item>
                <el-form-item label="报修故障" prop="报修故障">
                    <el-input v-model="formData.报修故障" clearable placeholder="请输入报修故障" />
                </el-form-item>
                <el-form-item label="故障说明" prop="故障说明">
                    <el-input v-model="formData.故障说明" clearable placeholder="请输入故障说明" />
                </el-form-item>
                <el-form-item label="报修服务类型" prop="报修服务类型">
                    <el-input v-model="formData.报修服务类型" clearable placeholder="请输入报修服务类型" />
                </el-form-item>
                <el-form-item label="报修数量" prop="报修数量">
                    <el-input v-model="formData.报修数量" clearable placeholder="请输入报修数量" />
                </el-form-item>
                <el-form-item label="母单号" prop="母单号">
                    <el-input v-model="formData.母单号" clearable placeholder="请输入母单号" />
                </el-form-item>
                <el-form-item label="用户名称" prop="用户名称">
                    <el-input v-model="formData.用户名称" clearable placeholder="请输入用户名称" />
                </el-form-item>
                <el-form-item label="手机号码" prop="手机号码">
                    <el-input v-model="formData.手机号码" clearable placeholder="请输入手机号码" />
                </el-form-item>
                <el-form-item label="创建时间" prop="创建时间">
                    <el-input v-model="formData.创建时间" clearable placeholder="请输入创建时间" />
                </el-form-item>
                <el-form-item label="详细地址" prop="详细地址">
                    <el-input v-model="formData.详细地址" clearable placeholder="请输入详细地址" />
                </el-form-item>
                <el-form-item label="公司名称" prop="公司名称">
                    <el-input v-model="formData.公司名称" clearable placeholder="请输入公司名称" />
                </el-form-item>
                <el-form-item label="邮箱" prop="邮箱">
                    <el-input v-model="formData.邮箱" clearable placeholder="请输入邮箱" />
                </el-form-item>
                <el-form-item label="工单备注" prop="工单备注">
                    <el-input v-model="formData.工单备注" clearable placeholder="请输入工单备注" />
                </el-form-item>
                <el-form-item label="收货备注" prop="收货备注">
                    <el-input v-model="formData.收货备注" clearable placeholder="请输入收货备注" />
                </el-form-item>
                <el-form-item label="最终服务类型" prop="最终服务类型">
                    <el-input v-model="formData.最终服务类型" clearable placeholder="请输入最终服务类型" />
                </el-form-item>
                <el-form-item label="保修状态1" prop="保修状态1">
                    <el-input v-model="formData.保修状态1" clearable placeholder="请输入保修状态1" />
                </el-form-item>
                <el-form-item label="故障类型" prop="故障类型">
                    <el-input v-model="formData.故障类型" clearable placeholder="请输入故障类型" />
                </el-form-item>
                <el-form-item label="故障描述" prop="故障描述">
                    <el-input v-model="formData.故障描述" clearable placeholder="请输入故障描述" />
                </el-form-item>
                <el-form-item label="物料费用" prop="物料费用">
                    <el-input v-model="formData.物料费用" clearable placeholder="请输入物料费用" />
                </el-form-item>
                <el-form-item label="服务费" prop="服务费">
                    <el-input v-model="formData.服务费" clearable placeholder="请输入服务费" />
                </el-form-item>
                <el-form-item label="优惠费用" prop="优惠费用">
                    <el-input v-model="formData.优惠费用" clearable placeholder="请输入优惠费用" />
                </el-form-item>
                <el-form-item label="收费合计" prop="收费合计">
                    <el-input v-model="formData.收费合计" clearable placeholder="请输入收费合计" />
                </el-form-item>
                <el-form-item label="检修结果" prop="检修结果">
                    <el-input v-model="formData.检修结果" clearable placeholder="请输入检修结果" />
                </el-form-item>
                <el-form-item label="新SN" prop="新SN">
                    <el-input v-model="formData.新SN" clearable placeholder="请输入新SN" />
                </el-form-item>
                <el-form-item label="坏品入库库房" prop="坏品入库库房">
                    <el-input v-model="formData.坏品入库库房" clearable placeholder="请输入坏品入库库房" />
                </el-form-item>
                <el-form-item label="支付方式" prop="支付方式">
                    <el-input v-model="formData.支付方式" clearable placeholder="请输入支付方式" />
                </el-form-item>
                <el-form-item label="实收金额" prop="实收金额">
                    <el-input v-model="formData.实收金额" clearable placeholder="请输入实收金额" />
                </el-form-item>
                <el-form-item label="支付单号" prop="支付单号">
                    <el-input v-model="formData.支付单号" clearable placeholder="请输入支付单号" />
                </el-form-item>
                <el-form-item label="支付姓名" prop="支付姓名">
                    <el-input v-model="formData.支付姓名" clearable placeholder="请输入支付姓名" />
                </el-form-item>
                <el-form-item label="支付账户" prop="支付账户">
                    <el-input v-model="formData.支付账户" clearable placeholder="请输入支付账户" />
                </el-form-item>
                <el-form-item label="支付日期" prop="支付日期">
                    <el-input v-model="formData.支付日期" clearable placeholder="请输入支付日期" />
                </el-form-item>
                <el-form-item label="收款结果" prop="收款结果">
                    <el-input v-model="formData.收款结果" clearable placeholder="请输入收款结果" />
                </el-form-item>
                <el-form-item label="收款备注" prop="收款备注">
                    <el-input v-model="formData.收款备注" clearable placeholder="请输入收款备注" />
                </el-form-item>
                <el-form-item label="发货类型" prop="发货类型">
                    <el-input v-model="formData.发货类型" clearable placeholder="请输入发货类型" />
                </el-form-item>
                <el-form-item label="快递公司1" prop="快递公司1">
                    <el-input v-model="formData.快递公司1" clearable placeholder="请输入快递公司1" />
                </el-form-item>
                <el-form-item label="快递单号1" prop="快递单号1">
                    <el-input v-model="formData.快递单号1" clearable placeholder="请输入快递单号1" />
                </el-form-item>
                <el-form-item label="发货备注" prop="发货备注">
                    <el-input v-model="formData.发货备注" clearable placeholder="请输入发货备注" />
                </el-form-item>
                <el-form-item label="创建" prop="创建">
                    <el-input v-model="formData.创建" clearable placeholder="请输入创建" />
                </el-form-item>
                <el-form-item label="时间2" prop="时间2">
                    <el-input v-model="formData.时间2" clearable placeholder="请输入时间2" />
                </el-form-item>
                <el-form-item label="审核" prop="审核">
                    <el-input v-model="formData.审核" clearable placeholder="请输入审核" />
                </el-form-item>
                <el-form-item label="审核时间" prop="审核时间">
                    <el-input v-model="formData.审核时间" clearable placeholder="请输入审核时间" />
                </el-form-item>
                <el-form-item label="受理" prop="受理">
                    <el-input v-model="formData.受理" clearable placeholder="请输入受理" />
                </el-form-item>
                <el-form-item label="受理日期" prop="受理日期">
                    <el-input v-model="formData.受理日期" clearable placeholder="请输入受理日期" />
                </el-form-item>
                <el-form-item label="报价" prop="报价">
                    <el-input v-model="formData.报价" clearable placeholder="请输入报价" />
                </el-form-item>
                <el-form-item label="报价日期" prop="报价日期">
                    <el-input v-model="formData.报价日期" clearable placeholder="请输入报价日期" />
                </el-form-item>
                <el-form-item label="处理" prop="处理">
                    <el-input v-model="formData.处理" clearable placeholder="请输入处理" />
                </el-form-item>
                <el-form-item label="处理日期" prop="处理日期">
                    <el-input v-model="formData.处理日期" clearable placeholder="请输入处理日期" />
                </el-form-item>
                <el-form-item label="结单" prop="结单">
                    <el-input v-model="formData.结单" clearable placeholder="请输入结单" />
                </el-form-item>
                <el-form-item label="结单日期" prop="结单日期">
                    <el-input v-model="formData.结单日期" clearable placeholder="请输入结单日期" />
                </el-form-item>
                <el-form-item label="耗时" prop="耗时">
                    <el-input v-model="formData.耗时" clearable placeholder="请输入耗时" />
                </el-form-item>
                <el-form-item label="预计完成时间" prop="预计完成时间">
                    <el-input v-model="formData.预计完成时间" clearable placeholder="请输入预计完成时间" />
                </el-form-item>
                <el-form-item label="服务单状态" prop="服务单状态">
                    <el-input v-model="formData.服务单状态" clearable placeholder="请输入服务单状态" />
                </el-form-item>
                <el-form-item label="派单价格" prop="派单价格">
                    <el-input v-model="formData.派单价格" clearable placeholder="请输入派单价格" />
                </el-form-item>
                <el-form-item label="收货备注1" prop="收货备注1">
                    <el-input v-model="formData.收货备注1" clearable placeholder="请输入收货备注1" />
                </el-form-item>
                <el-form-item label="发货物流费用" prop="发货物流费用">
                    <el-input v-model="formData.发货物流费用" clearable placeholder="请输入发货物流费用" />
                </el-form-item>
                <el-form-item label="结算状态" prop="结算状态">
                    <el-input v-model="formData.结算状态" clearable placeholder="请输入结算状态" />
                </el-form-item>
                <el-form-item label="是否结算" prop="是否结算">
                    <el-input v-model="formData.是否结算" clearable placeholder="请输入是否结算" />
                </el-form-item>
                <el-form-item label="结算月份" prop="结算月份">
                    <el-input v-model="formData.结算月份" clearable placeholder="请输入结算月份" />
                </el-form-item>
                <el-form-item label="不结算原因" prop="不结算原因">
                    <el-input v-model="formData.不结算原因" clearable placeholder="请输入不结算原因" />
                </el-form-item>
                <el-form-item label="是否保内结算" prop="是否保内结算">
                    <el-input v-model="formData.是否保内结算" clearable placeholder="请输入是否保内结算" />
                </el-form-item>
                <el-form-item label="是否保外买断" prop="是否保外买断">
                    <el-input v-model="formData.是否保外买断" clearable placeholder="请输入是否保外买断" />
                </el-form-item>
                <el-form-item label="保内不结算原因" prop="保内不结算原因">
                    <el-input v-model="formData.保内不结算原因" clearable placeholder="请输入保内不结算原因" />
                </el-form-item>
                <el-form-item label="物流费结算金额" prop="物流费结算金额">
                    <el-input v-model="formData.物流费结算金额" clearable placeholder="请输入物流费结算金额" />
                </el-form-item>
                <el-form-item label="保内结算金额" prop="保内结算金额">
                    <el-input v-model="formData.保内结算金额" clearable placeholder="请输入保内结算金额" />
                </el-form-item>
                <el-form-item label="保外结算金额" prop="保外结算金额">
                    <el-input v-model="formData.保外结算金额" clearable placeholder="请输入保外结算金额" />
                </el-form-item>
                <el-form-item label="其他结算金额" prop="其他结算金额">
                    <el-input v-model="formData.其他结算金额" clearable placeholder="请输入其他结算金额" />
                </el-form-item>
                <el-form-item label="保外买断金额" prop="保外买断金额">
                    <el-input v-model="formData.保外买断金额" clearable placeholder="请输入保外买断金额" />
                </el-form-item>
                <el-form-item label="合计结算金额" prop="合计结算金额">
                    <el-input v-model="formData.合计结算金额" clearable placeholder="请输入合计结算金额" />
                </el-form-item>
                <el-form-item label="结算备注" prop="结算备注">
                    <el-input v-model="formData.结算备注" clearable placeholder="请输入结算备注" />
                </el-form-item>
                <el-form-item label="时间" prop="时间">
                    <el-input v-model="formData.时间" clearable placeholder="请输入时间" />
                </el-form-item>
            </el-form>
        </popup>
    </div>
</template>

<script lang="ts" setup name="tbWorktaskEdit">
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { apiTbWorktaskAdd, apiTbWorktaskEdit, apiTbWorktaskDetail } from '@/api/tb_worktask'
import { timeFormat } from '@/utils/util'
import type { PropType } from 'vue'
defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')


// 弹窗标题
const popupTitle = computed(() => {
    return mode.value == 'edit' ? '编辑投保碎屏工单' : '新增投保碎屏工单'
})

// 表单数据
const formData = reactive({
    id: '',
    工单号: '',
    状态: '',
    工单类型: '',
    分配机构: '',
    分配人员: '',
    参与人员: '',
    业务标识: '',
    工单来源: '',
    来源编号: '',
    包裹编号: '',
    快递公司: '',
    快递单号: '',
    产品IMEI: '',
    产品品牌: '',
    产品型号: '',
    产品颜色: '',
    保单号: '',
    密码: '',
    出厂日期: '',
    购买日期: '',
    保修期限: '',
    保修状态: '',
    报修故障: '',
    故障说明: '',
    报修服务类型: '',
    报修数量: '',
    母单号: '',
    用户名称: '',
    手机号码: '',
    创建时间: '',
    详细地址: '',
    公司名称: '',
    邮箱: '',
    工单备注: '',
    收货备注: '',
    最终服务类型: '',
    保修状态1: '',
    故障类型: '',
    故障描述: '',
    物料费用: '',
    服务费: '',
    优惠费用: '',
    收费合计: '',
    检修结果: '',
    新SN: '',
    坏品入库库房: '',
    支付方式: '',
    实收金额: '',
    支付单号: '',
    支付姓名: '',
    支付账户: '',
    支付日期: '',
    收款结果: '',
    收款备注: '',
    发货类型: '',
    快递公司1: '',
    快递单号1: '',
    发货备注: '',
    创建: '',
    时间2: '',
    审核: '',
    审核时间: '',
    受理: '',
    受理日期: '',
    报价: '',
    报价日期: '',
    处理: '',
    处理日期: '',
    结单: '',
    结单日期: '',
    耗时: '',
    预计完成时间: '',
    服务单状态: '',
    派单价格: '',
    收货备注1: '',
    发货物流费用: '',
    结算状态: '',
    是否结算: '',
    结算月份: '',
    不结算原因: '',
    是否保内结算: '',
    是否保外买断: '',
    保内不结算原因: '',
    物流费结算金额: '',
    保内结算金额: '',
    保外结算金额: '',
    其他结算金额: '',
    保外买断金额: '',
    合计结算金额: '',
    结算备注: '',
    时间: '',
})


// 表单验证
const formRules = reactive<any>({

})


// 获取详情
const setFormData = async (data: Record<any, any>) => {
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }
    
    
}

const getDetail = async (row: Record<string, any>) => {
    const data = await apiTbWorktaskDetail({
        id: row.id
    })
    setFormData(data)
}


// 提交按钮
const handleSubmit = async () => {
    await formRef.value?.validate()
    const data = { ...formData,  }
    mode.value == 'edit' 
        ? await apiTbWorktaskEdit(data) 
        : await apiTbWorktaskAdd(data)
    popupRef.value?.close()
    emit('success')
}

//打开弹窗
const open = (type = 'add') => {
    mode.value = type
    popupRef.value?.open()
}

// 关闭回调
const handleClose = () => {
    emit('close')
}



defineExpose({
    open,
    setFormData,
    getDetail
})
</script>
